import { Checkbox, Form } from "antd";
import { type FC, useEffect } from "react";
import { useDebounceFn, useMemoizedFn } from "ahooks";
import { produce } from "immer";
import { useMemo } from "react";
import styles from "./index.module.scss";
// import { useContentStore, useCustomizationStore, useStore } from "@/store";
import { updateCustomization } from "@/service";
import { useCustomizationStore } from "@/src/providers/customization-store-provider";
import { useCommonStore } from "@/src/providers/common-store-provider";
import { useContentStore } from "@/src/providers/content-store-provider";

interface IndexProps {
  style?: React.CSSProperties;
}

const Index: FC<IndexProps> = ({ style }) => {
  const { updateAccentColor, customization } = useCustomizationStore(
    (state) => state,
    (o, n) => {
      return (
        o.customization.applyAccentColor === n.customization.applyAccentColor &&
        o.customization.title === n.customization.title
      );
    }
  );
  const { currentTab } = useCommonStore((state) => state);

  const { content } = useContentStore(
    (state) => state,
    (o, n) => {
      return currentTab === "content";
    }
  );
  const { applyAccentColor } = customization;
  const [form] = Form.useForm();

  useEffect(() => {
    form.setFieldsValue({
      applyAccentColor,
    });
  }, [applyAccentColor]);
  const updateValue = (params) => {
    return updateCustomization({
      ...params,
    });
  };
  const { run } = useDebounceFn(
    (data) => {
      updateValue({
        updates: [
          {
            path: data.path,
            value: data.value,
          },
        ],
        id: customization.id,
      });
    },
    {
      wait: 1000,
    }
  );
  const onChange = useMemoizedFn((v) => {
    const data = produce(customization, (draft) => {
      draft.applyAccentColor = v;
    });
    if (customization.id) {
      run({
        path: `applyAccentColor`,
        value: v,
      });
    }
    updateAccentColor(data.applyAccentColor);
  });
  const optionsWithDisabled = useMemo(() => {
    const options = [
      { label: "姓名", value: "name" },
      { label: "求职岗位", value: "expJob" },
      { label: "标题", value: "headings" },
      { label: "详情图标", value: "icons" },
      { label: "日期", value: "dates" },
    ];
    if (
      content.skills &&
      content.skills.entries?.findIndex((item) => item.list?.length) !== -1
    ) {
      options.push({ label: "进度条", value: "progressBars" });
    }
    // if (customization.title?.style !== 'simple') {
    //   options.push({ label: '标题点缀', value: 'titleBkg' })
    // }
    return options;
  }, [content.skills, customization.title]);
  return (
    <div className={styles.applyAccentColor} style={style}>
      <div>
        <h5>点缀色使用范围</h5>
        <div style={{ marginTop: "20px" }}>
          <Form
            form={form}
            onValuesChange={(e) => {
              onChange(e.applyAccentColor);
            }}
          >
            <Form.Item name={"applyAccentColor"}>
              <Checkbox.Group options={optionsWithDisabled} />
            </Form.Item>
          </Form>
        </div>
      </div>
    </div>
  );
};

export default Index;
